<template>
    <div class="login">
        <!-- <img src="../../static/image/logo.png" class="logo">
        <div class="circle"></div>
        <img src="../../static/image/genesyslogo.png" class="genesysLogo"> -->
        <img src="../../static/image/aleLogo1.png" class="zle_logo">
        <div class="content">
            <img src="../../static/image/loginicon.png" class="image">
            <div class="right">
                <div class="title">欢迎使用中国华信智能视频客服系统</div>
                <div class="subtitle">欢迎登录</div>
                <Input class="input" style="margin-top: 20px" placeholder="请输入用户名" v-model="name"></Input>
                <Input class="input" style="margin-top: 20px" placeholder="请输入密码" v-model="pwd" type="password"></Input>
                <Input class="input" style="margin-top: 10px" placeholder="请输入工位号" v-model="place"></Input>
                <div class="btn" @click="agentlogin">登录</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {genesyslogin,storageLoginData,setUrl,login} from "../api/api";
    import jwt from 'jsonwebtoken';
    export default {
        name: "GenesysLogin",
        data(){
            return{
                name:'800100',
                pwd:'zealcomm',
                place:'600100',
            }
        },
        mounted() {
            //软键盘回车事件
            var self = this;
            document.onkeydown = function (event) {
                var e = event || window.event;
                if (e.keyCode === 13) {
                    self.agentlogin();
                }
            };
        },
        methods:{

            /*agent login*/
            agentlogin(){
                if (this.name == null||this.name==""){
                    this.$Message.info('请输入用户名');
                    return;
                }else if (this.pwd == null||this.pwd==""){
                    this.$Message.info('请输入密码');
                    return;
                }else if (this.place == null||this.place==""){
                    this.$Message.info('请输入工位');
                    return;
                }
                var self = this;
                genesyslogin(this.name.trim(),this.pwd.trim(),this.place.trim()).then(function (resp) {
                    if (resp.status == 200){
                        if (resp.data.code == 200){
                            var result = jwt.decode(resp.data.data.accessToken);
                            console.log(result);
                            storageLoginData(result,resp);
                            setUrl();
                            self.$router.push('/agent');
                        } else{
                            self.$Message.error(resp.data.message);
                        }
                    } else{
                        self.$Message.error(resp.statusText);
                    }
                }).catch((error)=>{
                    console.log(error,error.response);
                    this.$Message.error(error);
                })
            },


            showpwd(){
                let password = document.getElementById("password")
                if(password.type === "password"){
                    password.type = "text";
                    this.eyesimage = eyes;
                }else{
                    password.type = "password";
                    this.eyesimage = uneyes;
                }
            },

        }
    }
</script>

<style scoped>

    .login{
        position:fixed;
        top: 0;
        left: 0;
        width:100%;
        height:100%;
        background-color: #00ff00;
        background: url('../../static/image/background.png');
        background-repeat: no-repeat;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .logo{
        left: 30px;
        top: 30px;
        width: 144px;
        height: 30px;
        position: absolute;
    }

    .circle{
        width:10px;
        height:10px;
        background:rgba(255,255,255,1);
        opacity:0.68;
        position: absolute;
        left: 180px;
        top: 40px;
        border-radius: 5px;
    }

    .genesysLogo{
        left: 200px;
        top: 30px;
        width: 120px;
        height: 30px;
        position: absolute;
        object-fit: contain;
    }

    .zle_logo{
        left: -50px;
        top: -100px;
        width: 500px;
        height: 350px;
        position: absolute;
        object-fit: contain;
    }


    .content{
        width:580px;
        height:333px;
        background:rgba(255,255,255,1);
        box-shadow:2px 7px 115px 10px rgba(47,112,158,0.4);
        border-radius:13px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .image{
        width: 239px;
        height: 192px;
    }

    .right{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin-left: 50px;
    }

    .title{
        width:270px;
        height:29px;
        font-size:15px;
        font-family:Source Han Sans CN;
        font-weight:bold;
        color:rgba(79,79,79,1);
        line-height:24px;
        text-align: left;
    }

    .subtitle{
        width:270px;
        height:18px;
        font-size:9px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:rgba(194,192,192,1);
        line-height:18px;
        text-align: left;
    }

    .input{
        width:250px;
        background:rgba(246,246,246,1);
        border-radius:3px;
    }

    .btn{
        width:250px;
        height:35px;
        background:rgba(44,137,234,1);
        border-radius:16px;
        margin-top: 40px;
        font-size:9px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height: 35px;
        cursor:pointer;
    }

</style>
